<template>
  <div>
    <!-- el-tree
               data="树形数据"
               :props:{
                 label:'label',
                 children:'children'
               }
               作用域插槽：自定义当前行的内容
                   v-slot=“{data}”
                   data:当前行的所有数据

     -->
    <!-- 需求：
              广东省
                 广州市
                    白云区
                    天河区
                 深圳市
                    南山区
                    宝安区
                       石岩
      -->
    <el-tree :data="list" :props="{ label: 'name', children: 'child' }">
      <template v-slot="{ data }">
        <div class="item">
          <div>{{ data.name }}</div>
          <button>添加</button>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: '广东省',
          child: [
            {
              name: '广州市',
              child: [
                {
                  name: '白云区'
                },
                {
                  name: '天河区'
                }
              ]
            },
            {
              name: '深圳市',
              child: [
                {
                  name: '南山区'
                },
                {
                  name: '宝安区',
                  child: [
                    {
                      name: '石岩'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
</style>
